light mode
night mode
অ্যাজাক্স (Ajax)

Ajax এবং PHP এর মাধ্যমে Server Side Pagination

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে Pagination তৈরি করা (Creating Pagination with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এবং PHP ব্যবহার করে Server Side Pagination তৈরি করা একটি কার্যকর পদ্ধতি, যা ডাটাবেসে বড় ডেটাসেটের সাথে কাজ করার সময় খুবই গুরুত্বপূর্ণ। Server Side Pagination ডাটাবেস থেকে প্রতিবার শুধুমাত্র নির্দিষ্ট পরিমাণে ডেটা ফেচ করে, যা সার্ভার এবং ক্লায়েন্ট উভয়ের পারফরম্যান্স উন্নত করে।

Server Side Pagination এর কী পয়েন্ট:

  1. Ajax-Based Pagination: প্রতিবার যখন ব্যবহারকারী পেজ নম্বর বা নেভিগেশন বাটনে ক্লিক করে, তখন Ajax এর মাধ্যমে একটি রিকোয়েস্ট সার্ভারে পাঠানো হয়। সার্ভার নির্দিষ্ট পেজের জন্য ডেটা লোড করে JSON ফরম্যাটে রেসপন্স রিটার্ন করে, যা পেজ রিফ্রেশ ছাড়াই ক্লায়েন্ট সাইডে রেন্ডার হয়।
  2. Dynamic Pagination Controls: Pagination বাটনগুলো ডায়নামিক্যালি তৈরি এবং আপডেট করা হয়, যা ব্যবহারকারীকে সহজে নেভিগেট করতে সহায়তা করে।
  3. PHP এবং SQL Integration: PHP এবং MySQL এর মাধ্যমে ডাটাবেস কুয়েরি করে প্রতিটি পেজের ডেটা ফেচ করা হয়, যা কাস্টমাইজ করা সহজ।

উদাহরণ: Ajax এবং PHP এর মাধ্যমে Server Side Pagination

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Side Pagination Example</title>
    <style>
        /* Pagination styling */
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin: 2px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Employee List</h1>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        <!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
    </div>

    <script>
        // বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
        let currentPage = 1;
        const rowsPerPage = 10;

        // পেজ লোড হলে ডেটা লোড করা
        document.addEventListener('DOMContentLoaded', function() {
            fetchData(currentPage);
        });

        // Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
        function fetchData(page) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    renderTable(response.data);
                    renderPagination(response.totalPages, page);
                }
            };

            xhr.send();
        }

        // টেবিল রেন্ডার করার ফাংশন
        function renderTable(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // পেজিনেশন রেন্ডার করার ফাংশন
        function renderPagination(totalPages, currentPage) {
            var pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            for (let i = 1; i <= totalPages; i++) {
                var button = document.createElement("button");
                button.textContent = i;
                if (i === currentPage) {
                    button.disabled = true;
                }
                button.onclick = function() {
                    fetchData(i);
                };
                pagination.appendChild(button);
            }
        }
    </script>
</body>
</html>

২. PHP স্ক্রিপ্ট (fetch_employees.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

// ডাটাবেস কানেকশন সেটআপ
$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;

// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
    "data" => $employees,
    "totalPages" => $totalPages
]);

$stmt->close();
$conn->close();
?>

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

  1. HTML এবং JavaScript:
    • পেজ লোড হলে fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।
    • Ajax রিকোয়েস্ট পাঠানোর সময় বর্তমান পেজ নম্বর এবং প্রতি পেজে কতটি রেকর্ড দেখাতে হবে (rowsPerPage) সেটি প্যারামিটার হিসেবে পাঠানো হয়।
    • রেসপন্স সফল হলে, JSON ডেটা প্রসেস করে renderTable() এবং renderPagination() ফাংশন কল হয়, যা টেবিল আপডেট করে এবং Pagination বাটন তৈরি করে।
  2. PHP স্ক্রিপ্ট:
    • PHP স্ক্রিপ্ট ইনপুট প্যারামিটার (পেজ এবং rowsPerPage) গ্রহণ করে এবং ডাটাবেসে SQL কুয়েরি চালিয়ে নির্দিষ্ট রেঞ্জের ডেটা ফেচ করে।
    • মোট রেকর্ডের সংখ্যা গণনা করে এবং মোট পেজ সংখ্যা নির্ধারণ করে JSON ফরম্যাটে রেসপন্স পাঠানো হয়।

Server Side Pagination এর সুবিধা:

  • Efficiency: প্রতিবার ডাটাবেস থেকে নির্দিষ্ট সংখ্যক ডেটা ফেচ করা হয়, যা সার্ভার এবং ক্লায়েন্ট উভয়ের পারফরম্যান্স উন্নত করে।
  • Smooth User Experience: Ajax ব্যবহার করে Pagination পরিচালনা করা হয়, যা পেজ রিফ্রেশ ছাড়াই ডেটা লোড এবং আপডেট করে, ফলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।
  • Scalability: বড় ডাটাবেস এবং বড় ডেটাসেটের সাথে কাজ করার সময় Server Side Pagination কার্যকরী এবং স্কেলেবল সমাধান প্রদান করে।

আরও দেখুন...

Ajax এবং PHP এর মাধ্যমে Server Side Pagination

or

Don't have an account? Register

Promotion